<template>
	<!-- 优惠券组 -->
	<view class="diy-coupon" v-if="dataList.length" :style="{ background: itemStyle.background, padding: itemStyle.paddingTop + 'px 0' }">
		<scroll-view :scroll-x="true">
			<view class="coupon-wrapper" v-for="(dataItem, index) in renderDataList" :key="index" wx:for-item="dataItem">
				<view :class="'coupon-item color__' + (dataItem.state.value ? dataItem.color.text : 'gray')">
					<i class="before" :style="{ background: itemStyle.background }"></i>
					<view class="left-content dis-flex flex-dir-column flex-x-center">
						<view class="content-top">
							<block v-if="dataItem.coupon_type.value == 10">
								<text class="f-30">￥</text>
								<text class="price">{{ dataItem.reduce_price }}</text>
							</block>
							<text class="price" v-if="dataItem.coupon_type.value == 20">{{ dataItem.discount }}折</text>
						</view>
						<view class="content-bottom">
							<text class="f-22">满{{ dataItem.min_price }}元可用</text>
						</view>
					</view>
					<view class="right-receive dis-flex flex-x-center flex-y-center" @tap="receiveTap" :data-index="index" :data-state="dataItem.state.value" :data-coupon-id="dataItem.coupon_id">
						<view v-if="dataItem.state.value" class="dis-flex flex-dir-column">
							<text>立即</text>
							<text>领取</text>
						</view>
						<view v-else class="state">
							<text>{{ dataItem.state.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {
			renderDataList: []
		};
	},
	watch: {
		dataList(newValue) {
			this.renderDataList = this.dataList;
		}
	},
	mounted() {
		this.renderDataList = this.dataList;
	},
	methods: {
		/**
		 * 领取优惠券
		 */
		receiveTap(e) {
			let dataset = e.currentTarget.dataset;
			if (!dataset.state) {
				return false;
			}
			let couponId = e.currentTarget.dataset.couponId;
			this.$post(this.$api.receiveUserCoupon, { coupon_id: couponId }, res => {
				Tools.showSuccess(res.msg);
				this.$set(this.renderDataList[dataset.index], 'state', { value: 0, text: '已领取' });
			});
		}
	}
};
</script>

<style lang="scss">
/* common.wxss */

/* @import "/utils/common.wxss"; */

.diy-coupon {
	white-space: nowrap;
	font-size: 0;
	.coupon-item {
		width: 350rpx;
		height: 130rpx;
		position: relative;
		color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		&.color__blue {
			.left-content {
				background: linear-gradient(-125deg, #57bdbf, #2f9de2);
			}
		}
		&.color__red {
			.left-content {
				background: linear-gradient(-128deg, #ff6d6d, #ff3636);
			}
		}
		&.color__violet {
			.left-content {
				background: linear-gradient(-113deg, #ef86ff, #b66ff5);
			}
		}
		&.color__yellow {
			.left-content {
				background: linear-gradient(-141deg, #f7d059, #fdb054);
			}
		}
		&.color__gray {
			.left-content {
				background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
			}
			.right-receive {
				background-color: #949494;
			}
		}

		.before {
			content: '';
			position: absolute;
			z-index: 1;
			width: 40rpx;
			height: 40rpx;
			top: 50%;
			left: -0.8rem;
			transform: translateY(-50%);
			border-radius: 80%;
			background-color: #fff;
		}
		.left-content {
			padding-left: 30rpx;
			position: relative;
			width: 70%;
			height: 100%;
			background-color: #e5004f;
			float: left;
			.content-top {
				.price {
					font-size: 44rpx;
				}
			}
		}
		.right-receive {
			width: 30%;
			height: 100%;
			background-color: #4e4e4e;
			text-align: center;
			float: right;
		}
	}
	.coupon-wrapper {
		display: inline-block;
		padding: 0 12rpx;
	}
	.right-receive {
		font-size: 26rpx;
	}
}
</style>
